<!--添加系统变量 -->
<template>
  <el-dialog
    title="提示"
    v-model="dialogVisible"
    style="width: 40%; height: 100%; float: right; margin: 0"
    :close-on-click-modal="false"
    :showClose="false"
    :before-close="Cancel"
  >
    <!-- 头部 -->
    <template #title>
      <!-- 这里添加您希望在左上角放置的内容，例如关闭按钮 -->
      <span>
        <i class="el-icon-close" @click="dialogVisible = false" style="cursor: pointer"></i>
      </span>
      <span> 添加系统变量 </span>
    </template>
    <el-form label-position="top">
      <!-- 上面两行input -->

      <!-- 设备选择 -->
      <el-form-item label="设备选择" style="width: 100%">
        <div style="display: flex; justify-content: center; width: 100%; align-items: center">
          <div style="flex: 2">
            <el-select v-model="SelectDevice" placeholder="请选择" @change="DeviceChange">
              <el-option
                v-for="item in AxiosOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div style="flex: 1; text-align: center">等于</div>
          <div style="flex: 4">
            <el-select v-model="selectTime" placeholder="请选择">
              <el-option
                v-for="item in TimeSelect"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-if="selectTime === '常量'"
              v-model="inputValue"
              placeholder="请输入常量"
            ></el-input>
            <el-cascader
              v-if="selectTime === '变量/设备值'"
              v-model="changeValue"
              :options="check1"
              :props="{
                label: 'name',
                value: 'statusName',
                expandTrigger: 'hover'
              }"
              @change="handleChange"
              style="width: 100%"
            />
          </div>
        </div>
      </el-form-item>
    </el-form>

    <!-- 底部 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="showDelete" type="danger" @click="DeleteActions">删除</el-button>
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
        <!-- <el-button @click="loginaa">显示设备</el-button> -->
      </span>
    </template>
  </el-dialog>
</template>
    
    <script>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import AutoRendermod1JSON from '../../../MyJson/AutoRendermod1.json'
import { ElMessage } from 'element-plus'
import { v4 as uuidv4 } from 'uuid'

export default {
  setup(_, { emit }) {
    // 导入 自动化模板2
    const AutoRendermod1 = ref(AutoRendermod1JSON.template)
    // dialog的关闭显示
    const dialogVisible = ref(false)
    //  select  选择设备的值
    const SelectDevice = ref('')
    // vuex导入
    const store = useStore()
    // 系统变量数组
    const AxiosOptions = ref(null)
    // vuex 设备类型
    const deviceTypeStr = ref(store.state.deviceTypeStr)
    // 系统变量 select 选中的值
    const SystemVariable = ref([])
    // da
    const deviceName = ref(null)
    const id = ref(null)

    const check1 = ref([])
    const inputValue = ref(null)
    const changeValue = ref(null)
    // select 选择的值 变量 OR 常量
    const selectTime = ref(null)
    //  系统变量
    const TimeSelect = ref([
      { name: '常量', value: '常量' },
      { name: '变量/设备值', value: '变量/设备值' }
    ])

    const showDelete = ref(false)
    //
    //
    //
    //
    //
    //
    //
    //
    // 选中设备的值
    const DeviceChange = (event) => {
      id.value = event
      const res = AxiosOptions.value.filter((item) => item.id === event)
      if (res) {
        deviceName.value = res[0].name
        SystemVariable.value = JSON.parse(JSON.stringify(res[0].values))
      }
    }

    const loginaa = () => {}

    const firstname = ref(null)
    const lastname = ref(null)
    const handleChange = () => {
      const dds = check1.value.filter((item) => {
        if (item.statusName == changeValue.value[0]) {
          firstname.value = item.name
        }
        return item.statusName == changeValue.value[0]
      })
      if (changeValue.value[1]?.length) {
        dds[0].children.filter((item) => {
          if (item.statusName == changeValue.value[1]) {
            lastname.value = item.name
          }
          return item.statusName == changeValue.value[1]
        })
      }
    }

    // 确定后输出表单
    const submit = () => {
      const uuid = uuidv4()
      const result = []
      let name
      //  if()
      let tag
      if (selectTime.value === '常量') {
        tag = inputValue.value
        name = inputValue.value
      } else {
        if (changeValue.value[1]) {
          tag = `{${changeValue.value[0]}.${changeValue.value[1]}}`
        } else {
          tag = `{${changeValue.value[0]}}`
        }

        if (lastname.value) {
          name = `${firstname.value}.${lastname.value}`
        } else {
          name = firstname.value
        }
      }

      SystemVariable.value.forEach((item) => {
        let res = {
          id: uuid,
          executionType: 'AUTO_SCHED_EXECUTION_TYPE_DEVICE',
          deviceId: id.value,
          statusType: 'AUTO_SCHED_EXECUTION_IS_VARIABLE_DVC_CONSTANT',
          statusName: item.statusName,
          checkValue: 'AUTO_SCHED_COMPARISON_EQ',
          statusValue: tag,
          changetag: changeValue.value,
          deviceName: deviceName.value,
          rendermod1: item.rendermod1,
          rendermod2: item.rendermod2,
          name: name,
          type: item.type,
          renderModel: item.renderModel,
          Change: 'ActionVariable',
          selectTime: selectTime.value
        }
        result.push(res)
      })

      emit('executions', result)
      Cancel()
    }

    // 取消
    const Cancel = () => {
      SelectDevice.value = ''
      SystemVariable.value = []
      dialogVisible.value = false
      changeValue.value = null
      lastname.value = null
      firstname.value = null
      selectTime.value = null
      inputValue.value = null
      showDelete.value = false
    }

    // 打开页面
    const openmyDialog = () => {
      check1.value = []
      const listDvcAndDvcVer = window.api.listDvcAndDvcVer()
      const res = JSON.parse(listDvcAndDvcVer)
      res.forEach((item) => {
        if (item.DeviceVariable === 'AVAILABLE') {
          item.children = item.property
          item.children.forEach((e) => {
            e.name = e.propertyName
          })
          item.statusName = item.id
          check1.value.push(item)
        }
        if (item.id === '1234567890') {
          item.children = item.property
          item.statusName = item.id
          item.children.forEach((e) => {
            e.name = e.propertyName
          })
          check1.value.push(item)
        }
      })

      dialogVisible.value = true

      const MyfilterList = JSON.parse(listDvcAndDvcVer)

      const result = MyfilterList.filter((item) => {
        return item.isVirtual === 'IS_VARIABLE' && item.DevicetypeValue === 1002
      })

      const pushlist = JSON.parse(JSON.stringify(result))
      pushlist.forEach((item) => {
        item.statusName = `${item.id}.SystemVariable`
        check1.value.push(item)
      })

      // const getmylist = res.filter((item) => item.id === '1234567890')
      // const ddss = JSON.parse(JSON.stringify(getmylist))

      AxiosOptions.value = result
    }

    // 删除
    const DeleteActions = () => {
      emit('DeleteActions')
      Cancel()
    }
    return {
      showDelete,
      AutoRendermod1,
      deviceTypeStr,
      SystemVariable,
      dialogVisible,
      SelectDevice,
      AxiosOptions,
      deviceName,
      id,
      check1,
      changeValue,
      TimeSelect,
      selectTime,
      firstname,
      lastname,
      inputValue,
      loginaa,
      handleChange,
      openmyDialog,
      submit,
      DeviceChange,
      Cancel,
      DeleteActions
    }
  }
}
</script>
    
    <style lang="less" scoped>
.myCascader {
  display: flex;
}
</style>
    